import { useState } from 'react'
import "../css/rem.js"
import { Form, Button, Input,NavBar} from '@nutui/nutui-react'
import {ArrowLeft} from "@nutui/icons-react"
import { Overlay } from 'react-vant';
import { useNavigate } from 'react-router-dom'
// 导入图形组件
import Tuxing from './Tuxing.jsx'
// 导入axios
import axios from 'axios';
export default function Registor() {
  let [username, setusername] = useState('')
  let [password, setpassword] = useState('')
  const [visible, setVisible] = useState(false);
  const [code, setcode] = useState(false);
  let nav = useNavigate()


  let handlecode = () => {
    setVisible(false)
  }
  // 注册按钮
  let handleregister=async()=>{
    try{
      let {data:{code}}=await axios({
        method:"post",
        url:'http://127.0.0.1:3000/registor',
        data:{username,password}
      })
      if(code==200){
        alert("注册成功")
        nav("/app/login")
      }
    }
    catch(e){
      alert("注册失败")
    }
    
    
    // if (username.length > 0 && password.length > 0) {

    //   // if(code==200){
    //   //   nav("/login")
    //   // }else{
    //   //   alert("注册失败")
    //   // }
    // } else {
    //   alert('请输入用户名和密码')
    //   setVisible(false)
    //   return;
    // }
  }

  return (
    <>
    <NavBar
        back={
          <>
            <ArrowLeft />
            返回
          </>
        }
        onBackClick={(e) => nav("/app/login")}
      />
      <div style={{ textAlign: "center" }}>
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.VQie14Lx7VZjKuJjCRiBFwHaFR?rs=1&pid=ImgDetMain" alt="" style={{ width: "160px", height: "150px" }} />
        <h1>创建账号</h1>
      </div>

      <Form
        labelPosition="right"
        footer={
          <>
            {code ? <Button nativeType="submit" block type="primary" onClick={(e) => {
              handleregister()
            }}>
              注册
            </Button> : <Button nativeType="submit" block type="primary" onClick={(e) => {
              setVisible(true)
            }}>
              下一步
            </Button>}


          </>
        }
      >
        <Form.Item
          align="center"
          required
          label="用户名"
          name="username"
          rules={[
            { max: 10, message: '用户名不能超过10个字' },
            { required: true, message: '请输入用户名' },
            {
              validator: (value) => {
                return value.length > 10
              },
            },
          ]}
        >
          <Input
            className="nut-input-text"
            placeholder="请输入用户名"
            type="text"
            value={username}
            onChange={(e) => {
              setusername(e)
            }}
          />
        </Form.Item>
        <Form.Item
          align="center"
          required
          label="密码"
          name="password"
          rules={[
            { max: 8, message: '密码不能太简单' },
            { required: true, message: '请输入密码' },
            {
              validator: (value) => {
                return value.length > 8
              },
            },
          ]}
        >
          <Input
            className="nut-input-text"
            placeholder="请输入密码"
            type="password"
            value={password}
            onChange={(e) => { setpassword(e) }}
          />
        </Form.Item>
      </Form>
      {/* 滑片验证 */}
      {/* <Modal title="Basic Modal" open={isModalOpen} >

      </Modal> */}
      <Overlay visible={visible} onClick={() => setVisible(false)}
        style={{
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Tuxing getcode={handlecode} setcode={setcode} setVisible={setVisible} username={username} password={password} />
      </Overlay>
    </>
  )
}
